<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <span>起始日期配置：</span>
        <el-date-picker
          v-model="time"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button
          class="filter-item"
          style="margin-left: 10px;margin-top: 10px"
          type="primary"
          icon="el-icon-check"
          @click="saveTime"
        >保存
        </el-button>
      </el-row>
      <el-row>
        <span>链接配置：</span>
        <el-input
          v-model="aesLink"
          placeholder="输入链接"
          style="width: 26%;"
          class="filter-item"
          clearable
        />
        <el-button
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          icon="el-icon-check"
          @click="saveAesLink"
        >保存
        </el-button>
      </el-row>
      <el-row>
        <el-input
          v-model="listQuery.cityName"
          placeholder="搜索内容"
          style="width: 20%;margin-right: 10px;"
          class="filter-item"
          clearable
          @keyup.enter.native="searchClick"
        />
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="searchClick"
        >搜索
        </el-button>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-edit"
          @click="addClick"
        >新增
        </el-button>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="cityCode"
        border
      >
        <el-table-column prop="cityCode" label="城市编码"/>
        <el-table-column prop="cityName" label="城市名称"/>
        <el-table-column label="启用/禁用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.open"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="updateEnable(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
<!--            <el-button type="text" size="big" @click="editClick(scope.row)">编辑</el-button>-->
            <el-button type="text" size="big" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="page.total>0"
        :total="page.total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="list"
      />
    </div>

    <el-dialog :title="form.cityCode ? '编辑':'新增' " :visible.sync="editDialogTableVisible"
               @opened="editDialogTableOpened" width="30%">
      <el-form
        ref="form"
        label-position="left"
        :model="form"
        label-width="100px"
        size="small"
        @keyup.enter.native="save"
      >
        <el-form-item label="省份选择" prop="cityCode">
          <el-select v-model="form.cityCode" filterable placeholder="请选择">
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用/禁用" prop="_open">
          <el-switch
            v-model="form.open"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editDialogTableVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="save">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {CodeToText} from 'element-china-area-data'
import request from '@/utils/request'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'CityConfig',
  components: {Pagination},
  data() {
    return {
      editDialogTableVisible: false,
      passwordDialogVisible: false,
      form: {},
      listQuery: {
        cityName: '',
        current: 1
      },
      time: [],
      aesLink: '',
      page: {
        total: 0
      },
      tableData: [],
      cities: [
        {value: '110000', label: '北京市'},
        {value: '120000', label: '天津市'},
        {value: '130000', label: '河北省'},
        {value: '140000', label: '山西省'},
        {value: '150000', label: '内蒙古自治区'},
        {value: '210000', label: '辽宁省'},
        {value: '220000', label: '吉林省'},
        {value: '230000', label: '黑龙江省'},
        {value: '310000', label: '上海市'},
        {value: '320000', label: '江苏省'},
        {value: '330000', label: '浙江省'},
        {value: '340000', label: '安徽省'},
        {value: '350000', label: '福建省'},
        {value: '360000', label: '江西省'},
        {value: '370000', label: '山东省'},
        {value: '410000', label: '河南省'},
        {value: '420000', label: '湖北省'},
        {value: '430000', label: '湖南省'},
        {value: '440000', label: '广东省'},
        {value: '450000', label: '广西壮族自治区'},
        {value: '460000', label: '海南省'},
        {value: '500000', label: '重庆市'},
        {value: '510000', label: '四川省'},
        {value: '520000', label: '贵州省'},
        {value: '530000', label: '云南省'},
        {value: '540000', label: '西藏自治区'},
        {value: '610000', label: '陕西省'},
        {value: '620000', label: '甘肃省'},
        {value: '630000', label: '青海省'},
        {value: '640000', label: '宁夏回族自治区'},
        {value: '650000', label: '新疆维吾尔自治区'},
        {value: '710000', label: '台湾省'},
        {value: '810000', label: '香港特别行政区'},
        {value: '820000', label: '澳门特别行政区'},
      ]
    }
  },
  created() {
    this.list()
    this.getConfig()
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    list: function () {
      request({
        url: '/api/city/open/list',
        method: 'post',
        data: this.listQuery
      }).then(res => {
        this.tableData = res.data.records
        this.page.total = res.data.total
      })
    },
    getConfig: function () {
      request({
        url: '/api/admin/config/get',
        method: 'post',
        data: {unKey: 'CONFIG_CITY_TIME'}
      }).then(res => {
        if (res.data) {
          this.time = [res.data.value, res.data.valueExt]
        }
      })
      request({
        url: '/api/admin/config/get',
        method: 'post',
        data: {unKey: 'CONFIG_AES_LINK'}
      }).then(res => {
        if (res.data) {
          this.aesLink = res.data.value
        }
      })
    },
    editDialogTableOpened: function () {

    },
    updateEnable: function (row) {
      request({
        url: '/api/city/open/updateEnable',
        method: 'post',
        data: {cityCode: row.cityCode, open: row.open}
      }).then(res => {
        this.$message({message: '修改状态成功', type: 'success'})
        this.passwordDialogVisible = false
        this.list()
      })
    },
    addClick: function () {
      this.editDialogTableVisible = true
      this.form = {open: true}
    },
    saveTime: function () {
      request({
        url: '/api/admin/config/edit',
        method: 'post',
        data: {unKey: 'CONFIG_CITY_TIME', value: this.time[0], valueExt: this.time[1]}
      }).then(res => {
        console.info(res)
        this.$message({message: '操作成功', type: 'success'})
      })
    },
    saveAesLink: function () {
      request({
        url: '/api/admin/config/edit',
        method: 'post',
        data: {unKey: 'CONFIG_AES_LINK', value: this.aesLink}
      }).then(res => {
        console.info(res)
        this.$message({message: '操作成功', type: 'success'})
      })
    },
    save: function () {
      // this.form.beginTime = this.form.time[0]
      // this.form.endTime = this.form.time[1]
      this.form.cityName = CodeToText[this.form.cityCode]
      request({
        url: '/api/city/open/save',
        method: 'post',
        data: this.form
      }).then(res => {
        console.info(res)
        this.$message({message: '操作成功', type: 'success'})
        this.editDialogTableVisible = false
        this.list()
      })
    },
    editClick: function (row) {
      this.editDialogTableVisible = true
      // data.time = [data.beginTime,data.endTime]
      this.form = this.cloneObject(row)
    },
    deleteClick: function (row) {
      this.$confirm('确定要删除吗？').then(() => {
        request({
          url: '/api/city/open/delete',
          method: 'post',
          data: {cityCode: row.cityCode}
        }).then(res => {
          this.$message({message: '操作成功', type: 'success'})
          this.list()
        })
      })
    },
    searchClick: function () {
      this.listQuery.current = 1
      this.list()
    }

  }
}
</script>

<style scoped>

</style>
